<template>
  <van-config-provider :theme-vars="themeVars" style="position: relative">
    <router-view v-slot="{ Component, route }">
      <transition :name="transitionName" @after-enter="afterEnter">
        <!-- 没有key的话,vue的动画无法生效 -->
        <div :key="route.path" class="col page-body">
          <template v-if="route.meta.hideNavBar !== true">
            <van-nav-bar
              :left-arrow="!route.meta.hideBackBtn"
              :right-text="route.meta.rightBtn"
              :title="route.meta.title"
              class="page-nav-bar blur-bg"
              @click-left="onClickLeft()"
              @click-right="rightBtnClick"
            />
            <!--            <div class="nav-bar-placeholder"></div>-->
          </template>
          <div class="page-sc">
            <component :is="Component" ref="currentPageComponent" />
          </div>
        </div>
      </transition>
    </router-view>
  </van-config-provider>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue'
  import { getTheme } from '@/util/CustomTheme'
  import { ConfigProvider, NavBar } from 'vant'
  import router from '@/router'
  import { ProjectConfig } from '@/config'
  import { RouteLocationNormalized } from 'vue-router'

  export default defineComponent({
    name: 'App',
    components: {
      [ConfigProvider.name]: ConfigProvider,
      [NavBar.name]: NavBar
    },
    setup() {
      console.log('update')

      const themeVars = getTheme()

      const transitionName = ref('')

      const currentPageComponent = ref<any>(null)

      const routersHistoryArr: string[] = []

      onMounted(() => {
        //获取当前路由数据，并转化为数组，没有就默认为空

        const sessionHistory = sessionStorage.getItem(ProjectConfig.ROUTERS_HISTORY)
        const routersArr = sessionHistory && sessionHistory.split(',')
        if (routersArr) {
          routersHistoryArr.length = 0
          routersHistoryArr.push(...routersArr)
        }
        router.beforeEach((to, from) => {
          const hide = to.meta.hideAnim

          const anim = getAnimNameAndOptArr(to, from)

          if (hide !== true) {
            transitionName.value = anim
          }

          //存入本地sessionStorage,并转为字符串
          sessionStorage.setItem(ProjectConfig.ROUTERS_HISTORY, routersHistoryArr.join(','))
          return true
        })
      })

      const getAnimNameAndOptArr = (to: RouteLocationNormalized, from: RouteLocationNormalized): string => {
        if (to.path === from.path) {
          return nullAnim()
        }

        const length = routersHistoryArr.length

        // 刷新时，防止避免重复将一个页面的path存入栈内
        if (to.path === routersHistoryArr[length - 1]) {
          return nullAnim()
        }

        const index = routersHistoryArr.indexOf(to.path)
        if (index > -1) {
          routersHistoryArr.splice(index + 1, length)
          return reverse()
        }
        routersHistoryArr.push(to.path)
        return forward()
      }

      const nullAnim = () => {
        return ''
      }

      const forward = () => {
        return 'forward'
      }

      const reverse = () => {
        return 'reverse'
      }

      const onClickLeft = () => {
        router.back()
      }

      const afterEnter = () => {
        if (currentPageComponent.value) {
          const pageShow = currentPageComponent.value.onPageShown
          pageShow && pageShow()
        }
      }

      const rightBtnClick = () => {
        if (currentPageComponent.value) {
          const rightBthClick = currentPageComponent.value.rightBthClick
          rightBthClick && rightBthClick()
        }
      }

      return {
        themeVars,
        transitionName,
        onClickLeft,
        afterEnter,
        currentPageComponent,
        rightBtnClick
      }
    }
  })
</script>

<style>
  .common-nav-bar {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .page-nav-bar {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
  }

  .nav-bar-body::before {
    content: ' ';
    width: 100%;
    height: 46px;
    background-color: #ffffff;
  }

  .nav-bar-placeholder {
    width: 100%;
    height: 46px;
    background-color: #ffffff;
  }

  .page-body {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    background-color: #f5f5f5;
  }

  .page-sc {
    flex: 1;
  }

  .forward-enter-from {
    /*opacity: 0;*/
    background-color: #000000;
    display: none;
  }

  .reverse-enter-active,
  .reverse-leave-active,
  .forward-enter-active,
  .forward-leave-active {
    will-change: transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-property: transform;
    position: absolute;
    width: 100vw;
    backface-visibility: hidden;
  }

  .reverse-enter-active,
  .forward-leave-active {
    z-index: -1;
  }

  .reverse-leave-active,
  .forward-enter-active {
    top: 0;
    position: fixed !important;
    background-color: #f5f5f5;
    z-index: 100;
    height: 100vh;
  }

  .reverse-enter-active {
    /* animation: re 0.3s ease; */
    transform: translateX(0);
  }

  .reverse-leave-active {
    transform: translateX(100%);
  }

  @keyframes re {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0%);
    }
  }

  .forward-enter-active {
    animation: le 0.3s ease;
  }

  .forward-leave-active {
    /* transform: translate3d(-100%, 0, 0); */
    /* 不加这个会闪屏 */
    transform: translateX(0);
  }

  @keyframes le {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }
</style>
